<template>
  <div id="interMethValueDiv">
    <vxe-toolbar perfect>
      <template #buttons>
        <div class="smallToolTitle">
          参数设置</div>
        <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="rloading" @click="findInterfaceMethValueList"></vxe-button>
        <vxe-button type="text" class="button-blue" icon="vxe-icon-save" :disabled="isEmpty(interDictFieldList)" content="保存" :loading="sloading" @click="saveInterfaceMethValues"></vxe-button>

      </template>
    </vxe-toolbar>
    <div class="tableBox">
      <el-scrollbar height="100%">
        <vxe-form ref="formRef" :data="formData">
          <vxe-form-item class="padding-lr-xs" :align="formItm.align" :title="formItm.title" :field="formItm.field" :title-width="formItm.titleWidth" :title-colon="formItm.titleColon === 1" :title-asterisk="formItm.titleAsterisk === 1" :title-overflow="formItm.titleOverflow === 1" :show-title="formItm.showTitle === 1" :title-align="formItm.titleAlign" :vertical="formItm.vertical === 1" :content-class-name="formItm.contentClassName" :visible="formItm.visible === 1" :span="formItm.span" v-for="(formItm, formIdx) in interDictFieldList" :key="formIdx">
            <template #title>
              <div>
                <span class="padding-left-xs">{{ `${formItm.code} ${formItm.title}` }}</span>
              </div>
            </template>
            <template #default="params">
              <vxe-input v-if="formItm.compType === 'input'" v-model="params.data[formItm.id]" placeholder="请输入" clearable></vxe-input>

              <vxe-input v-if="formItm.compType === 'date' || formItm.compType === 'datetime'" v-model="params.data[formItm.id]" :type="formItm.compType === 'date' ? 'date' : 'datetime'" placeholder="请输入" clearable transfer></vxe-input>

              <vxe-checkbox-group v-if="formItm.compType === 'checkboxgroup'" v-model="params.data[formItm.id]">
                <vxe-checkbox :label="itm.label" :content="itm.content" v-for="(itm, idx) in formItm.fieldOptions" :key="idx"></vxe-checkbox>
              </vxe-checkbox-group>
              <vxe-radio-group v-if="formItm.compType === 'radiogroup'" v-model="params.data[formItm.id]">
                <vxe-radio :label="itm.label" :content="itm.content" v-for="(itm, idx) in formItm.fieldOptions" :key="idx"></vxe-radio>
              </vxe-radio-group>
              <vxe-checkbox v-if="formItm.compType === 'checkbox'" v-model="params.data[formItm.id]" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
              <vxe-input v-if="formItm.compType === 'integer'" v-model="params.data[formItm.id]" type="integer" placeholder="请输入" clearable></vxe-input>
              <vxe-switch v-if="formItm.compType === 'switch'" v-model="params.data[formItm.id]" :open-value="1" :close-value="0" open-label="是" close-label="否"></vxe-switch>
              <vxe-select v-if="formItm.compType === 'select'" v-model="params.data[formItm.id]" placeholder="请选择" transfer>
                <vxe-option v-for="(itm, idx) in formItm.fieldOptions" :key="idx" :value="itm.label" :label="itm.content"></vxe-option>
              </vxe-select>
              <vxe-textarea v-if="formItm.compType === 'textarea'" v-model="params.data[formItm.id]" placeholder="请输入"></vxe-textarea>

              <el-tooltip v-if="!isEmpty(formItm.remark)" :content="formItm.remark" placement="top">
                <el-icon :size="15" style="vertical-align: middle">
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </template>
          </vxe-form-item>
        </vxe-form>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
import { AppStore } from '@/stores/store';
let store = AppStore();
defineExpose({ initPage });
let interMeth: any = {};
let interDictFieldList: any = reactive([]);
let rloading = ref(false); //最左侧仪器树形表格加载
let sloading = ref(false);

let formData: any = reactive({});
function initPage(row: any) {
  interMeth = row;
  if (row.methodId) {
    row.id = row.methodId;
  }
  findInterfaceDictFieldList();
}
function findInterfaceDictFieldList() {
  interDictFieldList.length = 0;
  for (let key in formData) {
    delete formData[key];
  }
  rloading.value = true;
  const url = '/api/sys/sysInterfaceDictField/findInterfaceDictFieldList';
  let obj = { pid: interMeth.interfaceDictId, id: interMeth.fieldId };
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: obj
    })
    .then((res: any) => {
      if (res.status.code === 1) {
        interDictFieldList.push(...res.data);
        rloading.value = false;
        proxy.$nextTick(() => {
          findInterfaceMethValueList();
        });
      } else {
        rloading.value = false;
        VxeMessage('获取列表失败', VxeNotifyType.error);
      }
    })
    .catch((err: any) => {
      rloading.value = false;
      console.log(err);
    });
}
function findInterfaceMethValueList() {
  rloading.value = true;
  const url = '/api/sys/sysInterfaceMethValue/findInterfaceMethValueList';
  let obj: any = {
    dictId: interMeth.interfaceDictId,
    methodId: interMeth.id,
    id: interMeth.fieldId
  };
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: obj
    })
    .then((res: any) => {
      const paramValueList = res.data.fmValues;
      if (!isEmpty(paramValueList)) {
        for (const paramField of interDictFieldList) {
          const paramValue = paramValueList.find((item) => item.fieldId == paramField.id);
          if (paramValue) {
            if (paramField.compType == 'switch' || paramField.compType == 'checkbox') {
              formData[paramValue.fieldId] = Number(paramValue.value);
            } else if (paramField.compType == 'checkboxgroup' || paramField.compType == 'checkBusTable') {
              formData[paramValue.fieldId] = JSON.parse(paramValue.value);
              if (paramField.compType == 'checkBusTable') {
                if (!isEmpty(paramValue.value)) {
                  const valueDescArr = [];
                  for (const str of JSON.parse(paramValue.value)) {
                    if (!isEmpty(paramField.tableDataList)) {
                      valueDescArr.push(paramField.tableDataList.find((tds) => tds[paramField.correValue] == str)[paramField.correLabel]);
                    }
                  }
                  paramField.valueDesc = valueDescArr.join(',');
                } else {
                  paramField.valueDesc = '';
                }
              }
            } else {
              formData[paramValue.fieldId] = paramValue.value;
            }
          }
        }
      }
      rloading.value = false;
    })
    .catch((err: any) => {
      rloading.value = false;
      console.log(err);
    });
}
function saveInterfaceMethValues() {
  sloading.value = true;
  let paramValueList: any = [];
  for (const paramField of interDictFieldList) {
    let paramValue = {
      id: '',
      methodId: interMeth.id,
      interfaceId: interMeth.interfaceId,
      fieldId: paramField.id,
      dictId: paramField.pid,
      dataType: paramField.compType,
      value: ''
    };
    if (paramField.compType == 'checkboxgroup' || paramField.compType == 'checkBusTable') {
      paramValue.value = JSON.stringify(formData[paramField.id]);
    } else {
      paramValue.value = formData[paramField.id];
    }
    paramValueList.push(paramValue);
  }

  const url = '/api/sys/sysInterfaceMethValue/saveInterfaceMethValueList';
  const obj: any = {
    methodId: interMeth.id,
    methValueList: paramValueList
  };
  proxy.$http
    //注意此处的数据条数
    .post(url, obj)
    .then((res: any) => {
      VxeMessage('保存成功', VxeNotifyType.success);
      proxy.$emit('editMethValue');
      sloading.value = false;
      findInterfaceMethValueList();
    })
    .catch((err: any) => {
      sloading.value = false;
      VxeMessage('获取字典分类列表失败', VxeNotifyType.error);
    });
}
</script>

<style lang="scss" scoped>
#interMethValueDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .tableBox {
    height: calc(100% - 40px);

    .vxe-form {
      padding: 10px;
    }
  }
}

.vxe-form--item.is--span .vxe-default-input:not([type='submit']):not([type='reset']),
.vxe-form--item.is--span .vxe-default-textarea,
.vxe-form--item.is--span .vxe-default-select,
.vxe-form--item.is--span .vxe-input,
.vxe-form--item.is--span .vxe-textarea,
.vxe-form--item.is--span .vxe-select {
  width: 90%;
  margin: 0 5px 0 0;
}
</style>